<template>
    <div>
        <!-- 页面头部 start -->
		<div class="header w990 bc mt15">
			<div class="logo w990">
				<h2 class="fl"><a @click="$router.push('/')" href="#"><img src="~/assets/images/logo.png" alt="京西商城"></a></h2>
			</div>
		</div>
		<!-- 页面头部 end -->·

		<!-- 登录主体部分start -->
		<div class="login w990 bc mt10 regist">
			<div class="login_hd">
				<h2>用户注册</h2>
				<b></b>
			</div>
			<div class="login_bd">
				<div class="login_form fl">
					<form action="" method="post">
						<ul>
							<li>
								<label for="">用户名：</label>
								<input type="text" class="txt" v-model="regForm.username" />
								<p>3-20位字符，可由中文、字母、数字和下划线组成</p>
							</li>
							<li>
								<label for="">密码：</label>
								<input type="password" class="txt" v-model="regForm.password" />
								<p>6-20位字符，可使用字母、数字和符号的组合，不建议使用纯数字、纯字母、纯符号</p>
							</li>
							<li>
								<label for="">确认密码：</label>
								<input type="password" class="txt" v-model="password" />
								<p> <span>请再次输入密码</span></p>
							</li>
							<li>
								<label for="">手机号：</label>
								<input type="text" class="txt" v-model="regForm.mobile" />
								<button @click.prevent="sendSMS" :disabled="flag">点击获取验证码 <span v-if="flag"> {{seconds}} 秒</span></button>
								<p>11位手机号</p>
							</li>
							<li class="checkcode">
								<label for="">验证码：</label>
								<input type="text" v-model="checkcode" />
								<p>手机验证码</p>
							</li>
							<li>
								<label for="">&nbsp;</label>
								<input type="checkbox" class="chb" checked="checked" /> 我已阅读并同意《用户注册协议》
							</li>
							<li>
								<label for="">&nbsp;</label>
								<input type="submit" value="" @click.prevent="submit" class="login_btn" />
							</li>
						</ul>
					</form>


				</div>

				<div class="mobile fl">
					<h3>手机快速注册</h3>
					<p>中国大陆手机用户，编辑短信 “<strong>XX</strong>”发送到：</p>
					<p><strong>1069099988</strong></p>
				</div>

			</div>
		</div>
		<!-- 注册主体部分end -->

    </div>
</template>

<script>

import '~/assets/style/login.css'

export default {
    data(){
        return{
            //定义参数数据
			regForm: {},
			//确认密码
			password: '',
			//手机验证码
			checkcode: '',
			//布尔属性，判断按钮再倒计时期间不能再次被点击，也同时用来判断60s循环结束后，显示时间是否显示
			flag: false,
			//倒计时秒数
			seconds: 60,
			//定时器对象
			timer: null
        }
    },
    created(){

    },
    methods:{
        //创建一个注册表单提交方法，向mockjs发送请求
        submit: function () {

            //判断2次输入密码是否一致
            if(this.password!=this.regForm.password){
                return;
            }
            //发送ajax请求
            register(this.regForm).then(res => {
                //判断是否注册成功
                if (res.data.errno == 0) {
                    //注册成功
                    location.href = "login.html";
                } else {
                    //注册失败
                    alert(res.data.errmsg);
                }
            })
        },
        //发送短信方法
        sendSMS: function () {
            
            //调用apijs中方法即可
            sms({ mobile: this.regForm.mobile }).then(res => {
                //判断发送短信是否成功
                if (res.data.errno == 0) {
                    //同时给flag赋值为true，倒计时期间，按钮不可点击
                    this.flag = true;
                    //调用发送短信成功倒计时方法
                    timer = setInterval(this.daojishi, 1000);

                    //注册成功
                    alert("发送短信成功");
                } else {
                    //注册失败
                    alert(res.data.errmsg);
                }
            })
        },
        //倒计时
        daojishi: function () {
            //判断时间是否小于0
            if (this.seconds > 0) {
                this.seconds--;

            } else {
                clearInterval(timer);
                //同时给flag赋值为false,倒计时结束
                this.flag = false;
                //取消倒计时
                this.seconds = 60;

            }
        }
    }
}
</script>

<style>

</style>
